<template>
  <view class="search-page">
    <view class="header">
      <u-search
        height="60rpx"
        searchIconColor="#4b3138"
        :showAction="false"
        placeholder="请输入搜索关键词"
        shape="square"
        showAction
        actionText="搜索"
        v-model="keyword"
        @search="searchConfirm"
        @custom="searchConfirm"
      ></u-search>
    </view>
    <view class="srcroll">
      <scroll-view scroll-y class="scrollView">
        <view class="recommend">
          <view
            v-for="(item, index) in recommend"
            @click="pagoTo(item.id)"
            :key="index"
            class="recommendi"
          >
            <view class="image">
				<image v-if="item.goodImgOut" :src="baseImgUrl + item.goodImgOut" mode=""></image>
              <image v-else :src="baseImgUrl+item.goodImg" mode=""></image>
            </view>
            <view class="name">{{ item.goodName }}</view>
            <view
              class="hearts"
              :class="item.isCollect == 1 ? 'heartActive' : 'heart'"
              @click.stop="ClickHeart(item.id, index)"
            ></view>
            <view class="leftRight">
              <view class="left">
                <view class="introduce">
                  <view>规格：{{ item.goodSpecs || "无规格" }}</view>
                  <view>销量：{{ item.virtualSales || 0 }}</view>
                </view>
                <view class="price">
                  {{ "￥" + item.retailPrice }}
                </view>
                <view class="VipPrice" v-if="item.discountPrice">
                  <view class="vip">
                    <!-- 会员价 -->
                  </view>
                  <span>￥{{ item.discountPrice }}</span>
                </view>
              </view>
              <view class="right" @click.stop="addShoppingCart(item.id)">
                <u-icon name="plus" color="#fff" size="15"></u-icon>
              </view>
            </view>
          </view>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script>
import homeApi from "@/api/homePage";
import collectApi from "@/api/collect";
import shoppingCartApi from "@/api/shoppingCart";
import { baseImgUrl } from "@/config";
export default {
  name: "searchPage",
  components: {},
  data() {
    return {
		baseImgUrl,
      keyword: "",
      recommend: [],
    };
  },
  methods: {
    searchConfirm(e) {
      homeApi.getSearchResult({ search: e }).then((res) => {
        if (res.code == 200) {
          this.recommend = res.data;
        }
      });
    },
    pagoTo(id) {
      uni.navigateTo({
        url: `/subPages/details/goodDetail?id=${id}`,
      });
    },
    // 收藏
    ClickHeart(id, index) {
      collectApi.saveCollect({ itemId: id }).then((res) => {
        if (res.code == 200) {
          this.recommend[index].isCollect =
            this.recommend[index].isCollect == 1 ? 0 : 1;
          uni.showToast({
            title: `${
              this.recommend[index].isCollect == 1 ? "收藏" : "取消收藏"
            }成功`,
            icon: "none",
            mask: true,
          });
        }
      });
    },
    // 加入购物车
    addShoppingCart(id) {
      let data = {
        productId: id,
        cartNum: 1,
      };
      shoppingCartApi.addShoppingCart(data).then((res) => {
        if (res.code == 200) {
          uni.showToast({
            title: "加购成功！",
            icon: "none",
          });
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.search-page {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  background-color: #fff;

  .header {
    padding: 0 28rpx;
  }

  .srcroll {
    width: 100%;
    height: 100%;
    overflow-y: auto;
    padding: 0 28rpx;
  }

  .scrollView {
    width: 100%;

    // height: 100%;
    .recommend {
      width: 100%;
      height: 100%;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
    }

    .recommendi {
      width: 48%;
      margin: 20rpx 0;
      position: relative;

      .hearts {
        position: absolute;
        top: 40rpx;
        right: 40rpx;
        width: 60rpx;
        height: 60rpx;
      }

      .heart {
        background: url("../../static/images/home/heart.png") no-repeat;
        background-size: 100%;
      }

      .heartActive {
        background: url("../../static/images/home/heart_active.png") no-repeat;
        background-size: 100%;
      }

      .image {
        width: 100%;
        height: 335rpx;

        image {
          width: 100%;
          height: 100%;
          border-radius: 8%;
        }
      }

      .name {
        width: 100%;
        height: 55rpx;
        font-size: 28rpx;
        line-height: 55rpx;
        font-weight: 600;
      }

      .leftRight {
        display: flex;
        position: relative;

        .left {
          width: calc(100% - 20rpx);

          .text {
            color: #858585;
          }

          .introduce {
            width: 100%;
            font-size: 26rpx;
          }

          .price {
            width: 100%;
            height: 60rpx;
            font-size: 35rpx;
            line-height: 60rpx;
            font-weight: 600;
          }

          .VipPrice {
            width: 180rpx;
            height: 40rpx;
            background-color: #fee6c3;
            border-radius: 3px;
            display: flex;

            .vip {
              width: 50%;
              height: 100%;
              background: url("../../static/images/home/vip.png") no-repeat;
              background-size: 100% 100%;
              display: initial-block;
            }

            span {
              text-align: center;
            }
          }
        }

        .right {
          position: absolute;
          width: 20px;
          height: 20px;
          background-color: #ff4254;
          border-radius: 3px;
          bottom: 0;
          right: 2px;
          display: flex;
          align-items: center;
          justify-content: center;
        }
      }
    }
  }
}
</style>
